<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>年度收入报表</title>
  <!-- 引入 Vue 和 Element UI -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
    }
    .annual-report {
      max-width: 1200px;
      margin: 0 auto;
    }
    .summary-card {
      background-color: #f5f7fa;
      padding: 20px;
      margin-bottom: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    .summary-title {
      font-size: 18px;
      margin-bottom: 10px;
      color: #666;
    }
    .summary-value {
      font-size: 24px;
      font-weight: bold;
    }
    .year-selector {
      margin-bottom: 20px;
    }
    .data-table {
      margin-top: 20px;
    }
    .el-table .cell{
      text-align: center;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="annual-report">
    <h1>年度收入报表</h1>

    <!-- 年份选择器 -->
    <div class="year-selector">
      <el-select v-model="selectedYear" placeholder="选择年份" @change="fetchAnnualData">
        <el-option
                v-for="year in availableYears"
                :key="year"
                :label="year + '年'"
                :value="year">
        </el-option>
      </el-select>
    </div>

    <!-- 年度汇总 -->
    <div class="summary-card">
      <div class="summary-title">{{ selectedYear }}年总收入</div>
      <div class="summary-value">¥{{ formatNumber(annualSummary.totalIncome) }}</div>
    </div>

    <!-- 月度数据表格 -->
    <el-table
            class="data-table"
            :data="filteredMonthlyData"
            border
            style="width: 100%">
      <el-table-column
              prop="month"
              label="月份"
              width="100">
      </el-table-column>
      <el-table-column
              prop="totalIncome"
              label="总收入"
              width="180">
        <template slot-scope="scope">
          ¥{{ formatNumber(scope.row.totalIncome) }}
        </template>
      </el-table-column>
      <el-table-column
              prop="renewIncome"
              label="续费收入">
        <template slot-scope="scope">
          ¥{{ formatNumber(scope.row.renewIncome) }}
        </template>
      </el-table-column>
      <el-table-column
              prop="newCardIncome"
              label="新购卡收入">
        <template slot-scope="scope">
          ¥{{ formatNumber(scope.row.newCardIncome) }}
        </template>
      </el-table-column>
      <el-table-column
              prop="newMembers"
              label="新增会员数">
        <template slot-scope="scope">
          {{formatNumber(scope.row.newMembers)}}
        </template>
      </el-table-column>

    </el-table>
  </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/stadium.js"></script>
<script src="../../api/statistics.js"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      const currentYear = new Date().getFullYear();
      return {
        id:'',
        selectedYear: currentYear,
        availableYears: [currentYear - 2,currentYear - 1, currentYear],
        annualSummary: {
          totalIncome: 0
        },
        monthlyData: []
      };
    },
    computed: {
      currentMonth() {
        return new Date().getMonth() + 1; // 获取当前月份 (1-12)
      },
      filteredMonthlyData() {
        // 如果是当前年，只显示到当前月份
        const isCurrentYear = this.selectedYear === new Date().getFullYear();
        return isCurrentYear
                ? this.monthlyData.filter(item => item.month <= this.currentMonth)
                : this.monthlyData;
      }
    },
    created() {
      const urlParams = new URLSearchParams(window.location.search);
      this.id = urlParams.get('id');
      if (!this.id) {
        console.error('未获取到shopkeeper_id');
        // 可以添加错误处理，如重定向回原页面
      }
      // 从URL参数获取年份
      const queryParams = new URLSearchParams(window.location.search);
      const year = queryParams.get('year');
      if (year) {
        this.selectedYear = parseInt(year);
      }
      this.fetchAnnualData();

    },
    methods: {
      fetchAnnualData() {
        getAnnualReport({
          year:this.selectedYear,
          id:this.id
        }).then(res=>{
          if (res.code === 1){
            this.monthlyData = res.data.monthlyData.map(item =>({
              month:item.month,
              totalIncome:item.totalIncome || 0,
              renewIncome:item.renewIncome || 0,
              newCardIncome: item.newCardIncome || 0,
              newMembers:item.newMembers || 0
            }));

            this.annualSummary.totalIncome =res.data.totalIncome || 0
          }
        }).catch(err =>{
          console.error('获取年度报表失败'+err);
          this.$message.error('获取年度报表失败')
        })
      },
      formatNumber(num) {
        return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      }
    }
  });
</script>
</body>